<template>
    <view class="invitee tn-safe-area-inset-bottom">
        <tn-navbar z-index="1" index-url="/pages/index" fixed :bottom-shadow="false">受邀人列表</tn-navbar>

        <view class="invitee-list">

            <view class="invitee-list-item tn-flex-row" v-for="(member, index) in inviteeList">
                <view class="item-left tn-flex-5 tn-flex-rows">
                    <image :src="getAvatar(member.face)"></image>
                    <text>
                        {{ member.nickname }}
                    </text>
                </view>
                <view class="item-right tn-flex-3">{{ formatToDateTime(member.createTime * 1000) }}</view>
            </view>

            <tn-empty :show="emptyInviteeList" mode="data"></tn-empty>
            <tn-load-more class="load-more" v-if="!emptyInviteeList" :status="loadingStatus"
                :load-tips-text="loadMoreTipsText"></tn-load-more>
        </view>
    </view>
</template>
  
<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import TnNavbar from "@/tuniao-ui/components/tn-navbar/src/Navbar.vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import TnEmpty from "@/tuniao-ui/components/tn-empty/src/Empty.vue";
import TnLoadMore from "@/tuniao-ui/components/tn-load-more/src/LoadMore.vue";
import { LoadMoreStatus } from "@/tuniao-ui/types/tn-load-more";
import { ResultEnum } from "@/enums/httpEnum";
import { findInviteePage } from "@/api/invite";
import { formatToDateTime } from "@/utils/dateUtil";
import logo from "@/static/images/logo.png";
import { onReachBottom } from "@dcloudio/uni-app";

const emptyInviteeList = ref(false);

const loadMoreTipsText = {
    loadmore: "上滑加载更多",
    loading: "正在加载中...",
    nomore: "没有更多数据了",
};
// 受邀人接口
interface inviteeVO {
    id: number;
    nickname: string;
    face: string;
    createTime: number;
}
const total = ref(0);
const inviteeList = ref<inviteeVO[]>([]);
const haveData = ref(true);
const currentPage = ref(1);
const pageSize = ref(10);

// 加载状态
const loadingStatus = ref<LoadMoreStatus>("loadmore");

function getAvatar(avatar: string) {
    if (avatar == null) {
        return logo;
    } else {
        return avatar;
    }
}

async function loadMoreInvitee() {
    if (!haveData.value) {
        return;
    }
    loadingStatus.value = "loading";
    const { code, result } = await findInviteePage({
        current: currentPage.value,
        size: pageSize.value
    });
    if (code === ResultEnum.SUCCESS) {
        if (result.records.length < 1) {
            //loadingStatus.value = "nomore";
            console.log("没有更多数据了");
            haveData.value = false; // 标记无数据了
            if (currentPage.value === 1) {
                emptyInviteeList.value = true;
            }
        }
        inviteeList.value = inviteeList.value.concat(result.records);
        currentPage.value++;
    }
    loadingStatus.value = "nomore";
}

onMounted(() => {
    loadMoreInvitee();
});
// 页面刷到底部
onReachBottom(() => {
    loadMoreInvitee();
});
</script>
  
<style lang="scss" scoped>
.invitee {
    &-list {
        padding: 0 20rpx;

        &-item {
            margin-top: 20rpx;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 10rpx;
            height: 200rpx;
            padding: 20rpx;

            .item-left {
                    align-items: center;
                image {
                    width: 100rpx;
                    height: 100rpx;
                    border-radius: 100rpx;
                }

                text {
                    display: flex;
                    justify-content: center; 
                    align-items: center;
                    margin-left: 30rpx;
                }
            }

            .item-right {
                justify-content: center;
                align-items: center;
                color: #999;
            }
        }
    }
}
</style>
  